#{extends 'mainTemplate.html' /}
#{set title:'评论信息' /}

<style type="text/css">

#mainContent { background:0 0 repeat-y; overflow:auto;zoom:1; margin-bottom:5px;}
#content { margin-left:155px !important; margin-left:152px; height:auto !important; height:100px;}

#sidebar a { color: #000; text-decoration: none; }
#sidebar a:hover { color: #F00; }
#sidebar {float:left; width: 150px; border: 1px solid #CCC; }
#sidebar ul { list-style: none; margin: 0px; padding: 0px; }
#sidebar ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }



body,table{
    font-size:12px;
}

table{
    table-layout:fixed;
    empty-cells:show; 
    border-collapse: collapse;
    margin:0 auto;
}

th {
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA  no-repeat;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
background: #fff;
font-size:12px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}

td.alt {
/* background: #F5FAFA; */
background:#A0B4DC;
color: #797268;
}
th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff no-repeat;
}
th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa  no-repeat;
color: #797268;
}
td.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa no-repeat;
color: #797268;
}
</style>

<script>
	function selectRow(event){
		event  =  event  ||  window.event; // 事件    
		var  target    =  event.target  ||  event.srcElement; // 获得事件源
		var arr = target.parentElement.children;
		var num = arr.length;
		for(var i=0;i<num;++i)
		{
				if(arr[i].className == "")
		    		arr[i].className = "alt";
		}
		var orders = document.getElementsByName('order_info');
		num = orders.length;
		for(var i=0;i<num;++i){
			if(orders[i].id != target.parentElement.id){
				var childs = orders[i].children;
				for(var j = 0;j<childs.length;j++){
					if(childs[j].className == "alt")
						childs[j].className = childs[j].className.replace("alt","");
				}
			}
				
		}
	}
	
	/**
	*
	*上一次编辑过的tr id
	*/
	var lastEditOrderId;
	function editOrder(targetId){
		var orderDisplay = document.getElementById("order_display_"+targetId);
		if(orderDisplay){
			orderDisplay.style.visibility = "hidden";
			orderDisplay.style.display = "none";
		}
		
		var orderEdit = document.getElementById("order_edit_"+targetId);
		orderEdit.style.visibility = "visible";
		orderEdit.style.display = "";
		
		if(lastEditOrderId){
			var lastOrderEdit = document.getElementById("order_edit_"+lastEditOrderId);
			lastOrderEdit.style.visibility = "hidden";
			lastOrderEdit.style.display = "none";
			
			var lastOrderDisplay = document.getElementById("order_display_"+lastEditOrderId);
			if(lastOrderDisplay){
				lastOrderDisplay.style.visibility = "visible";
				lastOrderDisplay.style.display = "";
			}
		}
		/**如果上一次与本次编辑的对像为同一个 则将 lastEditOrderId 对像置为空*/
		lastEditOrderId = targetId==lastEditOrderId?null:targetId;
	}
</script>
<p/>
<div><p>周排行,周排行,周排行,周排行,周排行,</p></div>
<div id="mainContent">
     <div id="sidebar">
		<ul>
		<li><a href="#">订单</a></li>
		<li><a href="#">账户管理</a></li>
		<li><a href="#">文章管理</a></li>
		<li><a href="#">评论</a></li>
		<li><a href="#">反馈</a></li>
		<li><a href="#">收藏</a></li>
		</ul>
	</div>
	<iframe>
    <div id="content">
		<p style="background-color: #ccddff;padding: 5px;margin:0px;height: 20px;vertical-align: middle;text-align: left;">
			<span><a href="#">已晒</a></span>
			<span><a href="#">未晒</a></span>
			<span><a href="#">全部</a></span>
		</p>
        <table width="100%" id="mytab"  border="1" class="t1">
	 <thead>
	    <th scope="col" width="50%">宝贝</th>
	    <th scope="col" width="10%">单价(元)</th>
	    <th scope="col" width="10%">数量</th>
	    <th scope="col" width="10%">实付款</th>
	    <th scope="col" width="10%">交易状态</th>
	    <th scope="col" width="10%">其它操作</th>
	  </thead>
	
	#{list items:trades, as:'trade' }
		<tr style="background-color:#cccccc;width:100%">
	        <td class="specalt" colspan='6'>
	        	${trade.tid}
	        	#{if trade.endTime}
		    	${trade.endTime.format('yyyy-MM-dd HH:mm:ss')}     
			    #{/if}
			    #{else}
			    	    
			    #{/else}
		        ${trade.sellerNick}
	        </td>
	        
	 	</tr>
	 	<tr>
			 	#{list items:trade.orders, as:'order'}
		 			<tr name="order_info" id="order_info_${order.oid}" onclick="editOrder(${order.oid})">
		 				<td class="specalt" >
		 					<ul style="list-style:none;margin:0;padding:0;">
		 						<li style="float:left;margin: 0,5px;"><img src="${order.picPath}" width="50" height="50" style="vertical-align:middle;"/></li>
		 						<li style="float:left;width:200px;padding: 5px,5px;color:blue;">${order.title}</li>
		 					</ul>
		 				</td>
		 				<td style="text-align: right;" %{out.print(order.num == 2?'class="alt"':'')}%>
		 					${order.price}
		 				</td>
		 				<td style="text-align: right;"  %{out.print(order.num == 2?'class="alt"':'')}%>
		 					${order.num}
		 				</td>
		 				<td style="text-align: right;" %{out.print(order.num == 2?'class="alt"':'')}%>
		 					${order.payment}
		 				</td>
		 				<td %{out.print(order.num == 2?'class="alt"':'')}%>
		 					#{if order.status == 'TRADE_FINISHED'}
		 						完成
		 					#{/if}
		 					#{else}
		 						未完成
		 					#{/else}
		 				</td>
		 				<td %{out.print(order.num == 2?'class="alt"':'')}%>
		 					<ul style="list-style:none;margin:0;padding:0;">
			 					<li>
			 						#{if !orderStatus.contains(order.oid.toString())}
			 							<a href="@{TradeAction.addOrder(trade.tid)}">已晒</a>
			 						#{/if}
			 						#{else}
			 							<a href="javascript:editOrder(${order.oid})" onclick="editOrder(${order.oid})">晒单</a>
			 						#{/else}
			 					</li>
		 					</ul>
		 				</td>
		 			</tr>
		 			#{if !orderStatus.contains(order.oid.toString())}
		 				<tr id="order_display_${order.oid}" onclick="editOrder(${order.oid})">
		 				<td colspan="6" class="specalt">
	 						标题:
	 						<br/>
	 						理由:推荐原因:此商品很牛,无虚推荐理由!
	 						<br/>
	 						照片:<img/><img/><img/>
		 				</td>
		 			   </tr>
		 			#{/if}
		 			
		 			<tr id="order_edit_${order.oid}" style="visibility:hidden;display:none">
		 				<td colspan="6" class="specalt">
	 						<form action="">
	 							<p>
	 								<label for="title">标题:</label>
	 								<input id="title" type="text" value="${order.title}" style="width:70%;"/>
	 							</p>
	 							<p>
	 								<label for="reason">理由:</label>
	 								<textarea id="reason" rows="2" style="width:90%;">推荐原因:此商品很牛,无虚推荐理由!</textarea>
	 							</p>
	 							<p>
	 								<label for="photo">照片:</label>
	 								<input id="photo" type="file" value="上传使用照片"/>
		 							<img/>
		 							<img/>
		 							<img/>
	 							</p>
	 							<p><a>提交</a></p>
	 						</form>
		 				</td>
		 			</tr>
			 	#{/list}
	 	</tr>
	 	
	#{/list}
</table>
    </div>
	</iframe>
  </div>

   